<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>课堂点名</title>
    <link rel="stylesheet" href="css/styles.css">
    <link href="css/all.min.css" rel="stylesheet">
</head>
<body>
    <div class="stars"></div>
    <div class="twinkling"></div>
    <div class="fireworks-container"></div>

    <div class="settings-icon">
        <button id="settingsBtn" class="icon-btn" title="名单设置">
            <i class="fas fa-cog"></i>
        </button>
        <button id="poolSettingsBtn" class="icon-btn" title="抽取范围设置">
            <i class="fas fa-users"></i>
        </button>
    </div>

    <div class="container">
        <div class="number-selector">
            <div class="selector-label">选择人数</div>
            <div class="selector-buttons">
                <button class="number-btn active" data-count="1">1人</button>
                <button class="number-btn" data-count="2">2人</button>
                <button class="number-btn" data-count="3">3人</button>
                <button class="number-btn" data-count="4">4人</button>
                <button class="number-btn" data-count="5">5人</button>
            </div>
        </div>

        <div class="main-content">
            <div class="header">
                <h1 class="title">课堂点名</h1>
            </div>
            
            <div class="lottery-stage">
                <div class="lottery-box">
                    <div class="slot-machine">
                        <div class="slot-window">
                            <div class="slot-wrapper" id="slotWrapper">
                                <div class="slot-item placeholder-item">
                                    <div class="avatar" style="background: linear-gradient(45deg, #666, #999)">?</div>
                                    <div class="name">待抽取</div>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>

            <div class="control-panel">
                <button id="startRoll" class="roll-btn">
                    <div class="roll-btn-content">
                        <div class="btn-icon">
                            <i class="fas fa-random"></i>
                        </div>
                        <span class="btn-text">开始抽取</span>
                        <div class="btn-ripple"></div>
                    </div>
                </button>
            </div>

            <div class="avatar-wall">
                <div id="avatarContainer" class="avatar-container">
                    <!-- 头像将通过JavaScript动态添加 -->
                </div>
            </div>
        </div>
    </div>

    <!-- 设置对话框 -->
    <div id="settingsModal" class="modal">
        <div class="modal-content">
            <div class="modal-header">
                <h2>班级名单设置 <span class="student-count">（共 <span id="modalTotalCount">30</span> 人）</span></h2>
                <button id="closeModal" class="icon-btn">
                    <i class="fas fa-times"></i>
                </button>
            </div>
            <div class="name-list">
                <ul id="nameList"></ul>
            </div>
            <div class="name-input">
                <input type="text" id="newName" placeholder="输入小朋友的名字">
                <button id="addName" class="btn">
                    <i class="fas fa-plus"></i>
                    添加
                </button>
            </div>
        </div>
    </div>

    <!-- 抽取范围设置对话框 -->
    <div id="poolSettingsModal" class="modal">
        <div class="modal-content">
            <div class="modal-header">
                <h2>抽取范围设置 <span class="student-count">（已选择 <span id="selectedCount">0</span> 人）</span></h2>
                <div class="header-actions">
                    <button id="selectAllBtn" class="text-btn">
                        <i class="fas fa-check-square"></i> 全选
                    </button>
                    <button id="closePoolModal" class="icon-btn">
                        <i class="fas fa-times"></i>
                    </button>
                </div>
            </div>
            <div class="pool-list">
                <div class="pool-list-header">
                    <div class="search-box">
                        <i class="fas fa-search"></i>
                        <input type="text" id="studentSearch" placeholder="搜索小朋友...">
                    </div>
                </div>
                <div class="student-grid" id="studentGrid">
                    <!-- 学生卡片将通过JavaScript动态添加 -->
                </div>
            </div>
        </div>
    </div>

    <script src="js/script.js"></script>
</body>
</html> 